<template>
  <a-card>
    <a-form :model="addValue" auto-label-width>
      <a-form-item label="名称">
        <a-input v-model="addValue.PageName" placeholder="名称"/>
      </a-form-item>
      <a-form-item label="Banner图">
        <a-space>
          <a-image v-show="addValue.PageImg" :src="getImgUrl(addValue.PageImg)" width="50" height="50"/>
          <a-input v-model="addValue.PageImg" style="width: 500px;" placeholder="缩略图"/>
          <!--          <a-upload
                        :show-file-list="false"
                        :custom-request="customRequest"
                    >
                      <template #upload-button>
                        <a-button type="primary">上传</a-button>
                      </template>
                    </a-upload>-->
          <a-button type="primary" @click="isEditImage=true">{{ addValue.PageImg ? '编辑' : '添加' }}</a-button>
        </a-space>
      </a-form-item>
      <a-form-item label="内容">
        <editor :value="addValue.PageInfo" ref="editor"></editor>
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button type="primary" @click="SaveData">{{ addValue.PageId === 0 ? "添加" : "编辑" }}</a-button>
          <a-button @click="$router.push('/member/page')">返回</a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </a-card>
  <a-modal :width="1500" title="选择产品图片" v-model:visible="isEditImage" :footer="null" @cancel="isEditImage=false">
    <div style="height: 700px;overflow-y:auto;overflow-x:hidden; ">
      <edit-image :is-return="true" @setImage="setImage"/>
    </div>
  </a-modal>
</template>

<script>
import Editor from "../../components/editor.vue";
import {getImgUrl} from "@/until/tool.js";
import EditImage from "@/components/editImage.vue";

export default {
  name: "pageDetail",
  components: {EditImage, Editor},
  data() {
    return {
      addValue: {
        PageId: 0,
        PageName: "",
        PageImg: "",
        PageInfo: "",
      },
      isEditImage: false,
    };
  },
  mounted() {
    this.getParams();
  },
  methods: {
    getImgUrl,
    getParams() {
      if (Object.keys(this.$route.query).length > 0) {
        this.addValue.PageId = this.$route.query.pageId;
      }
      this.getData();
    },
    async getData() {
      if (this.addValue.PageId === 0) return;
      const res = await this.$Http.page({PageId: this.addValue.PageId});
      if (res["Data"]) {
        this.addValue = res["Data"][0];
      }
    },
    async SaveData() {
      this.addValue.PageInfo = this.$refs.editor.content;
      if (this.addValue.PageId === 0) {
        // 添加
        await this.$Http.pageAdd({PageName: this.addValue.PageName, PageImg: this.addValue.PageImg, PageInfo: this.addValue.PageInfo});
      } else {
        // 编辑
        await this.$Http.pageEdit(this.addValue);
      }
      this.$message.success(this.addValue.PageId === 0 ? "添加" : "编辑" + "成功!");
      await this.$router.push("/member/page");
    },
    setImage(data) {
      this.addValue.PageImg = data;
      this.isEditImage = false;
    }
  },
};
</script>

<style scoped>

</style>
